<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>三水国鸿校车售票商家小票</title>
    <link
            rel="stylesheet"
            href="./vant@2.12.54_lib_index.css"
    />
    <script src="./vue@2.6.14_dist_vue.min.js"></script>
    <script src="./vant@2.12.54_lib_vant.min.js"></script>
    <script src="./axios@1.4.0_dist_axios.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>
    <style>
        *{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        .header{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #606060;
            font-size: 16px;
            border-bottom: 1px dotted #24C373;
            padding: 10px 0;
        }
        .header > img{
            width: 80px;
            height: 80px;
        }
        .header> span{
            margin-top: 10px;
        }
        .btn-wrap{
            padding: 10px;
            box-sizing: border-box;
        }
        .btn-wrap .btn{
             width: 100%;
         }
        .content{
            padding: 10px;
            font-size: 14px;
        }
        .content > li{
            margin-bottom: 6px;
        }
    </style>
</head>
<body>
    <div id="app">

        <div class="header">
            <!--<van-icon name="checked" size="50" color="#24C373"></van-icon>-->
            <img src="./success.png" alt="">
            <span>支付成功</span>
        </div>
        <div class="btn-wrap" v-if="showBtn">
            <van-button type="primary" size="small" class="btn" @click="jumpOut">订单详情</van-button>
        </div>
        <ul class="content">
            <li>
                订单号：{{out_trade_no}}
            </li>
            <li>
                订单状态：{{Order_status}}
            </li>
        </ul>
    </div>
<!--<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
  if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
  }
</script>-->
<!--<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>-->

</body>
<script>

  //onIframeReady
  let mchData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'}
  let postData = JSON. stringify(mchData);
  parent.postMessage(postData,'https://payapp.weixin.qq.com');

  const URI = 'http://ssghxc.com';
  const path = 'https://fszyrj.com/SchoolBus_SSGH';
  const SECONDDIR = '/m-school_bus'
  new Vue({
    el: '#app',
    data() {
      return {
        out_trade_no: '',
        Order_status: '',
        showBtn: false
      }
    },

    methods: {
      init(){
        let _this = this,
          num = 1;
        const toast = vant.Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
        });
        Fn();
        let timer = setInterval(Fn,3000)

        function Fn(){
          toast.message = `第${num}/3次查询中，请稍等`;
          _this.getOrder({out_trade_no: _this.out_trade_no}).then(status => {
            console.log(status);
            num++;
            if (num === 3 || status !== '待支付'){
              _this.Order_status = status === '待支付' ? '待查询' : status;
              clearInterval(timer);
              vant.Toast.clear();
              _this.showBtn = true;
            }
          },() =>{
            clearInterval(timer);
            vant.Toast.clear();
          })
        }
      },
      jumpOut() {
        console.log('跳转');
        let url = URI + `${SECONDDIR}/ticketDetail?id=` + this.out_trade_no
        if (this.isAfterPay) url =  URI + `${SECONDDIR}/paidDetail?id=` + this.out_trade_no
        let mchData ={action:'jumpOut', jumpOutUrl:url}
        let postData = JSON. stringify(mchData);
        parent.postMessage(postData,'https://payapp.weixin.qq.com')
      },


      //获取地址栏参数
      GetQueryString(name) {
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if(r!=null)return unescape(r[2]); return null;
      },

      getOrder() {
        return new Promise((resolve,reject) => {
          let url1 = `/api/v2/OrderQuery?orderNo=${this.out_trade_no}`,
            url2 = `/api/v2/AfterPaymentQuery?wx_out_trade_no=${this.out_trade_no}`,
            url = this.isAfterPay ? url2 : url1;
          axios.get(path + url).then(res => {
            if (this.isAfterPay) {
              let row = res.data.root.data.row[0] || {};
              resolve(row.is_pay_off ? '已支付' : '支付失败');
              return
            }
            let {code, data} = res.data;
            if (code !== 200){
              reject();
              return;
            }
            let status = '待支付';
            switch (data.status) {
              case -1: status = '已退票';break;
              case 0: status = '待支付';break;
              case 1: status = '已支付';break;
              case 2: status = '申请退票中';break;
              case 3: status = '购票失败退款';break;
              case 4: status = '导入数据';break;
            }
            resolve(status);

          },() => {
            reject()
          });
        })

      }
    },
    mounted(){
      let id = this.GetQueryString('out_trade_no');
      this.out_trade_no = id;
      this.isAfterPay = id.substring(0,3) === 'HZF'

      this.init();
    },

  })
</script>
</html>
